<template>
    <div class="clist">
        <div v-for="item in brandlist" :key="item.id" @click="godetalis">
            <div class="tit"><img :src="item.itiUrl" :alt="item.id"></div>
            <dl class="clear">
                <dd v-for="(val,index) in item.cList" :key="val.index">
                    <img :src="val.imgUrl" :alt="val.imgUrl">
                    <p class="title">{{ val.title}}</p>
                    <p>
                        <span class="clist-price">￥{{ val.price}}</span>
                        <span class="iconfont comment">&#xe755; {{ val.comment }}</span>
                    </p>    
                </dd>
            </dl>
        </div>
        <div><img :src="this.footimg" alt=""></div> 
    </div>
</template>

<script>
export default {
    data(){
        return{
          brandlist:[
              {
                  "id":"01",
                  "itiUrl":require('@/assets/img/clist/tit1.jpg'),
                  "cList":[
                      {
                        "id":"01",
                        "imgUrl":require('@/assets/img/brand/brand1.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"789",
                        "comment":"445"
                      },
                      {
                        "id":"02",
                        "imgUrl":require('@/assets/img/brand/brand2.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"829",
                        "comment":"445"
                      },
                      {
                        "id":"03",
                        "imgUrl":require('@/assets/img/brand/brand3.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"999",
                        "comment":"555"
                      }
                  ]  
              },
              {
                  "id":"02",
                  "itiUrl":require('@/assets/img/clist/tit2.jpg'),
                  "cList":[
                      {
                        "id":"01",
                        "imgUrl":require('@/assets/img/brand/brand4.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"789",
                        "comment":"445"
                      },
                      {
                        "id":"02",
                        "imgUrl":require('@/assets/img/brand/brand5.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"829",
                        "comment":"445"
                      },
                      {
                        "id":"03",
                        "imgUrl":require('@/assets/img/brand/brand6.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"999",
                        "comment":"555"
                      }
                  ]  
              },
              {
                  "id":"03",
                  "itiUrl":require('@/assets/img/clist/tit3.jpg'),
                  "cList":[
                      {
                        "id":"01",
                        "imgUrl":require('@/assets/img/brand/brand7.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"789",
                        "comment":"445"
                      },
                      {
                        "id":"02",
                        "imgUrl":require('@/assets/img/brand/brand8.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"829",
                        "comment":"445"
                      },
                      {
                        "id":"03",
                        "imgUrl":require('@/assets/img/brand/brand9.png'),
                        "title":"印花夹棉复古旗袍",
                        "price":"999",
                        "comment":"555"
                      }
                  ]  
              }
          ],
          footimg:require("@/assets/img/public/zjc.png")  
        }
    },
    methods:{
        godetalis(){
            this.$router.push('/detalis')
        }
    }
}
</script>

<style scoped>
.clist{
    box-sizing: border-box;
    padding: .4rem;
}
dl{
    width: 100%;
    display: flex;
    justify-content: space-around;
}  
dd{
    float: left;
    width: 32%;
    height: 100%; 
    margin: 3% 0;
}
dd img{
    width: 100%;
    height: 100%;    
} 
dd .title{
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: justify;
    font-size: 11px;
    line-height: 20px;
    height: 20px;
    color: #fffefe;
}
.clist-price,.comment{
    font-size: .4rem;  
    line-height: .9rem;  
}
.clist-price{
    color: #f97104; 
    float: left;
}
.comment{
    float:right;  
    color: #fffefe;
}
</style>


